<template>
  <div class="main">
    <govheader title="化工产业大脑 · 亩均效益" @zfNameflagChange="zfNameflagChange"></govheader>
    <govnavigation></govnavigation>
    <el-row
      class="content"
      :gutter="24"
      v-if="zfNameflag"
      style="margin: 0; padding-left: 0px; padding-right: 0px;"
    >
      <el-col :span="8" class="content-left">
        <el-col class="box" style="margin: 0px; margin-top: 15px">
          <div class="title" style="width: 55%">
            <p>全省化工亩均效益</p>
          </div>
          <div class="content-body" style="margin-top: 10px">
            <div class="content-body-left">
              <div style="width: 100%">
                <div class="top-title">亩均税收（万元）</div>
              </div>
              <div style="width: 100%">
                <div class="top-value">
                  <!-- {{ indexData.perMuSum }} -->
                  <span
                    v-for="(i, key) in indexData.perMuSum"
                    :key="key"
                    :class="
                      i >= 0 ? 'top-value-color' : 'top-value-color-right'
                    "
                  >
                    <p>{{ i }}</p>
                  </span>
                </div>
              </div>
              <div class="compare-body compare_body">
                同比
                <span
                  :style="{
                    color: indexData.perMuTaxPer >= 0 ? '#23D99D' : '#F2632B',
                  }"
                >
                  <i :class="indexData.perMuTaxPer >= 0 ? 'el-top' : 'el-bottom'"></i>
                  {{ indexData.perMuTaxPer }}%
                </span>
              </div>
            </div>
            <div class="content-body-right">
              <div style="width: 100%">
                <div div class="top-title">亩均增加值（万元）</div>
              </div>
              <div style="width: 100%">
                <div class="top-value">
                  <!-- {{ indexData.perMuAddSum }} -->
                  <span
                    v-for="(i, key) in indexData.perMuAddSum"
                    :key="key"
                    :class="
                      i >= 0 ? 'top-value-color' : 'top-value-color-right'
                    "
                  >
                    <p>{{ i }}</p>
                  </span>
                </div>
              </div>
              <div class="compare-body compare_body">
                同比
                <span
                  :style="{
                    color: indexData.perMuAddPer >= 0 ? '#23D99D' : '#F2632B',
                  }"
                >
                  <i :class="indexData.perMuTaxPer >= 0 ? 'el-top' : 'el-bottom'"></i>
                  {{ indexData.perMuAddPer }}%
                </span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin: 0px; margin-top: 17px">
          <div class="title" style="width: 50%">
            <p>核心指标</p>
          </div>
          <div class="content-body" style="padding: 5px 0px">
            <div class="index-body">
              <div class="index-content">
                <div class="content-value">{{ indexData.totalLaborProduction }}</div>
                <div style="width: 50%; float: left">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{
                      color:
                        indexData.totalLaborProductionPer >= 0
                          ? '#23D99D'
                          : '#FF5A5A',
                    }"
                  >
                    <i
                      :class="
                        indexData.perMuTaxPer >= 0 ? 'el-top' : 'el-bottom'
                      "
                    ></i>
                    {{ indexData.totalLaborProductionPer }}%
                  </div>
                </div>
              </div>
              <span class="title-content">全员劳动指标率（万元/人）</span>
            </div>
            <div class="index-body">
              <div class="index-content">
                <div class="content-value">{{ indexData.energyAddedValue }}</div>
                <div style="width: 50%; float: left">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{
                      color:
                        indexData.energyAddedValuePer >= 0
                          ? '#23D99D'
                          : '#FF5A5A',
                    }"
                  >
                    <i
                      :class="
                        indexData.energyAddedValuePer >= 0
                          ? 'el-top'
                          : 'el-bottom'
                      "
                    ></i>
                    {{ indexData.energyAddedValuePer }}%
                  </div>
                </div>
              </div>
              <span class="title-content">单位能耗增加值（万元/吨标煤）</span>
            </div>
            <div class="index-body">
              <div class="index-content">
                <div class="content-value">{{ indexData.dischargeAddedValue }}</div>
                <div style="width: 50%; float: left">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{
                      color:
                        indexData.dischargeAddedValuePer >= 0
                          ? '#23D99D'
                          : '#FF5A5A',
                    }"
                  >
                    <i
                      :class="
                        indexData.dischargeAddedValuePer >= 0
                          ? 'el-top'
                          : 'el-bottom'
                      "
                    ></i>
                    {{ indexData.dischargeAddedValuePer }}%
                  </div>
                </div>
              </div>
              <span class="title-content">单位排放增加值（万元/吨）</span>
            </div>
            <div class="index-body">
              <div class="index-content">
                <div class="content-value">{{ indexData.rdExpenditure }}</div>
                <div style="width: 50%; float: left">
                  <div class="compare-word">同比</div>
                  <div
                    class="compare-body"
                    :style="{
                      color:
                        indexData.rdExpenditurePer >= 0 ? '#23D99D' : '#FF5A5A',
                    }"
                  >
                    <i
                      :class="
                        indexData.rdExpenditurePer >= 0 ? 'el-top' : 'el-bottom'
                      "
                    ></i>
                    {{ indexData.rdExpenditurePer }}%
                  </div>
                </div>
              </div>
              <span class="title-content">R&D经费支出占主营业务收入之比</span>
            </div>
          </div>
        </el-col>
        <el-col class="box" style="margin: 0px; margin-top: 17px">
          <div class="title">
            <p style="margin-left: 10px">总量指标</p>
          </div>
          <div class="content-body">
            <el-row :gutter="10" style="width: 100%; margin-left: 0px; margin-top: 10px">
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">税收实际贡献</div>
                  <div class="total-index-value">
                    <div> <span>{{ indexData.actualTaxContribution }}</span>    </div>

                  </div>
                    <div class="total-index-unit">(亿元)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">工业增加值</div>

                  <div class="total-index-value">  <span>{{ indexData.industrialAddedValue }}</span>  </div>
                   <div class="total-index-unit">(亿元)</div>

                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">主营业务收入</div>

                  <div class="total-index-value">
                    <span>{{ indexData.mainBusinessIncome }}</span>

                  </div>
                   <div class="total-index-unit">(亿元)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">实际占地面积</div>

                  <div class="total-index-value">
                    <span>{{ indexData.actualFloorArea }}</span>

                  </div>
                  <div class="total-index-unit">(亩)</div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="width: 100%; margin-top: 10px; margin-left: 0px">
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">年平均职工人数</div>

                  <div class="total-index-value">
                    <span>{{ indexData.employees }}</span>

                  </div>
                  <div class="total-index-unit">(人)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">研发经费支持</div>

                  <div class="total-index-value">
                    <span>{{ indexData.rdFundingSupport }}</span>

                  </div>
                    <div class="total-index-unit">(亿元)</div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">综合能耗(等价)</div>

                  <div class="total-index-value">
                    <span>{{ indexData.energyConsumption }}</span>
                    <div class="total-index-unit">(万吨标煤)</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="total-index-body">
                  <div class="total-index-title">排污量</div>

                  <div class="total-index-value">
                    <span>{{ indexData.dischargeCapacity }}</span>

                  </div>
                   <div class="total-index-unit">(万吨)</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-col>
      <el-col :span="8" class="content-center" style="background-color: (255, 255, 255, 0.5)">
        <div style="position: relative;">
          <div id="annular1" style="width: 100%; height: 456px"></div>
          <div style="position: absolute;bottom: 0;color:#00E4FF;font-size: 12px">此页面经济相关数据来源时间：{{dataTime}}年</div>
        </div>
        <div class="box" style="margin-top: 36px; margin-bottom: 0px">
          <div class="title">
            <p>园区亩均效益</p>
          </div>
          <div class="content-body" style="overflow: hidden">
            <div id="annular2" style="width: 100%; height: 220px"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-row :gutter="15" style="margin-top: 15px;">
          <el-col :span="12">
            <div class="box box2" style="position: relative;">
              <div class="title" style="width: 60%">
                <p style="padding-left: 18px">亩均趋势</p>
              </div>
              <div id="annular3" style="width: 100%; height: 181px"></div>
              <el-select
                class="select-body"
                style="width: 112px"
                placeholder="请选择"
                v-model="selectType"
                @change="typeChange"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box box2" style="position: relative">
              <div class="title" style="width: 80%">
                <p style="padding-left: 18px">行业分布情况</p>
              </div>
              <div style="position: relative">
                <div id="annular4" style="width: 100%; height: 183px;z-index:100"></div>
                <!-- <div class="aperture"></div> -->
                <!-- <div class="legend">
                  <div class="legendColor" :style="{'background-color':legendColor4}"></div>
                  <div>{{legendValue4}}</div>
                </div> -->
              </div>
              <el-select
                class="select-body"
                style="width: 80px;z-index: 100"
                placeholder="请选择"
                v-model="selectKind"
                @change="kindChange"
              >
                <el-option
                  v-for="item in kindList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <div class="box box1" style="margin: 0px;margin-top: 4px;">
              <div class="title">
                <p>产业分类亩均效益</p>
              </div>
              <div class="content-body">
                <div style="width: 100%; height: 180px; border-radius: 10px">
                   <div id="annularmax" style="width: 100%; height: 180px;"> </div>
                 </div>
              </div>

            </div>
              <div class="box box1" style="margin: 17px 0px 0px;">
              <div class="title">
                <p>企业分类清单</p>
              </div>
              <div class="content-body">
                <div style="width: 100%; height: 220px; border-radius: 10px">
                  <div id="annular5" style="width: 40%; height: 220px; float: left"></div>
                  <div class="enterprise-body">
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #00ffff"></div>
                      <div class="enterprise-type">A类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #fff">{{ enterpriseCount.entA }}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #0572ea"></div>
                      <div class="enterprise-type">B类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #fff">{{ enterpriseCount.entB }}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #6bd59f"></div>
                      <div class="enterprise-type">C类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #fff">{{ enterpriseCount.entC }}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #eae87a"></div>
                      <div class="enterprise-type">D类企业</div>
                      <div class="enterprise-unit">家</div>
                      <div class="enterprise-count" style="color: #fff">{{ enterpriseCount.entD }}</div>
                    </div>
                    <div class="enterprise-content">
                      <div class="enterprise-color" style="background: #ffcd5e"></div>
                      <div class="enterprise-type">暂无评价</div>
                      <div class="enterprise-unit">家</div>
                      <div
                        class="enterprise-count"
                        style="color: #fff"
                      >{{ enterpriseCount.NoEvaluation }}</div>
                    </div>
                  </div>
                </div>

              </div>

            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import govheader from '@/components/govheader2'
import govnavigation from '@/components/govnavigation2'
import 'echarts-gl'
import { time } from 'echarts'
import dd from 'gdt-jsapi'
const echarts = require('echarts')
export default {
  components: { govheader, govnavigation },
  name: 'zfPerMuBenefit',
  data () {
    return {
      lsitname: '312321,1',
      indexData: {
        actualTaxContribution: '0', // 税收实际贡献
        dischargeAddedValue: '0', // 工业增加值
        mainBusinessIncome: '0', // 主营业务收入
        actualFloorArea: '0', // 实际占地面积
        employees: '0', // 年平均职工数
        rdFundingSupport: '0', // 研发经费支出
        energyConsumption: '0', // 综合能耗
        dischargeCapacity: '0', // 排污量

        totalLaborProduction: '0', // 全员劳动生产率
        totalLaborProductionPer: '0', // 全员劳动生产率per
        energyAddedValue: '0', // 单位能耗增加值
        energyAddedValuePer: '0', // 单位能耗增加值per
        industrialAddedValue: '0', // 单位排放增加值
        dischargeAddedValuePer: '0', // 单位排放增加值per
        rdExpenditure: '0', // 研发经费支出占比
        rdExpenditurePer: '0', // 研发经费支出占比per

        perMuTax: '0', // 亩均税收
        perMuAdd: '0', // 亩均增加值
        perMuTaxPer: '0', // 亩均税收per
        perMuAddPer: '0' // 亩均增加值per
      },
      enterpriseCount: {
        entA: '0',
        entB: '0',
        entC: '0',
        entD: '0',
        NoEvaluation: '0'
      },
      zfNameflag: true,
      nowDate: '',
      dataTime: '',
      selectType: '01',
      typeList: [
        { value: '01', label: '亩均税收' },
        { value: '02', label: '亩均增加值' }
      ],
      selectKind: 'A',
      kindList: [
        { value: 'A', label: 'A类' },
        { value: 'B', label: 'B类' }
      ],
      tableData: [],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      option5: {},
      option6: {},
      myChart1: {},
      myChart2: {},
      myChart3: {},
      myChart4: {},
      myChart5: {},
      myChart6: {},
      option1Data: [],
      parkList: [],
      option1MinData: 5,
      option1MaxData: 20,
      option2XData: [],
      option2Data: [],
      option3XData: [],
      option3Data: [],
      option3TaxData: [],
      option3AddData: [],
      option4Data: [],
      option6XData: [],
      option6minData: [],
      option6maxData: [],
      colorList: [
        'rgb(5,148,239)',
        'rgb(5,119,234)',
        'rgb(101,206,153)',
        'rgb(243,242,134)',
        'rgb(255,203,91)',
        'rgb(183,74,237)'
      ],
      colorList1: [
        'rgb(109,104,255)',
        'rgb(0,239,254)',
        'rgb(68,215,182)',
        'rgb(255,166,0)',
        'rgb(152,123,255)',
        'rgb(118,190,204)'
      ],
      colorList2: [
        'rgb(4,32,245)',
        'rgb(0,96,255)',
        'rgb(109,212,0)',
        'rgb(254,219,101)',
        'rgb(163,10,235)',
        'rgb(0,135,146)'
      ],
      option5Data: [],

      center: '',
      center2: '',
      year: '',
      legendColor4: '',
      legendValue4: '',
      // timer4: null,
      startCharts1: null,
      startCharts2: null,
      startCharts4: null,
      startCharts5: null,
      startCharts6: null,
      myChart2IntervalId: null,
      angle4: 0
    }
  },
  created () {
    if (window.SITE_CONFIG['sitURL'] === 'https://www.plantmate.com/api') {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: '20',
              authCode: res.auth_code
            }
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log('res2:', res)
                localStorage.setItem('buriedPointInformation',JSON.stringify(res.data))
                this.$store.commit('zfName', res.data.lastName)
                if (res.code !== 0) {
                  this.zfNameflag = false
                }
              })
              .catch(() => {
                this.zfNameflag = false
              })
          }
        })
        .catch(() => {
          this.zfNameflag = false
        })
    }
  },
  mounted () {
    if (this.zfNameflag) {
      this.year = new Date().getFullYear() - 1

      this.getData()
    }
  },
  beforeDestroy () {
    let _this = this
    clearInterval(_this.startCharts1)
    clearInterval(_this.startCharts2)
    clearInterval(_this.startCharts4)
    clearInterval(_this.startCharts5)
    clearInterval(_this.startCharts6)
    clearInterval(_this.myChart2IntervalId)
  },
  methods: {
    zfNameflagChange (val) {
      this.zfNameflag = val
    },

    addEvent (obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + sEvent, fn)
      } else {
        obj.addEventListener(sEvent, fn, false)
      }
    },
    getData () {
      this.$http
        .post(`/home/government/govBenefit/getBenefit`, {
          rate: 'A'
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.dataTime = res.data.cityPerMu.year
            res.data.coreIndicators.perMuSum = String(
              res.data.coreIndicators.perMuSum
            )
            res.data.coreIndicators.perMuAddSum = String(
              res.data.coreIndicators.perMuAddSum
            )
            this.indexData = res.data.coreIndicators
            this.enterpriseCount = res.data.entRate
            this.tableData = res.data.entRate.entABList
            this.option2XData = res.data.parkPerMu.parkPerMuInfo.map((item) => {
              return item.parkName
            })
            this.option2Data = res.data.parkPerMu.parkPerMuInfo.map((item) => {
              return item.parkMuPerTax
            })
            this.option3XData = res.data.coreIndicators.perMuTax.perMuYearList

            this.option3Data = res.data.coreIndicators.perMuTax.perMuValue
            this.option3TaxData = res.data.coreIndicators.perMuTax.perMuValue
            this.option3AddData = res.data.coreIndicators.perMuTax.perMuAddValue
            let num = 0
            res.data.entRate.industryDistribution.forEach((item, index) => {
              if (num === this.colorList1.length) {
                num = 0
              }
              this.option4Data.push({
                name: item.name,
                value: Number(item.entNum),
                itemStyle: {
                  color: this.colorList1[num],
                  color1: this.colorList2[num]
                }
              })
              num++
            })
            this.option5Data.push({
              name: 'A类企业',
              value: res.data.entRate.entA
            })
            this.option5Data.push({
              name: 'B类企业',
              value: res.data.entRate.entB
            })
            this.option5Data.push({
              name: 'C类企业',
              value: res.data.entRate.entC
            })
            this.option5Data.push({
              name: 'D类企业',
              value: res.data.entRate.entD
            })
            this.option5Data.push({
              name: '暂无评价',
              value: res.data.entRate.NoEvaluation
            })

            res.data.cityPerMu.cityPerMu.forEach((i) => {
              i.name = i.city
              i.value = i.perMuTax
            })

            this.option1Data = res.data.cityPerMu.cityPerMu
            let arr = this.option1Data.map((i) => {
              return i.value
            }).sort((a, b) => { return a - b })
            this.option1MinData = arr[0]
            this.option1MaxData = arr[arr.length - 1]
            this.option6XData = res.data.coreIndicators.name
            this.option6minData = res.data.coreIndicators.muPerTax
            this.option6maxData = res.data.coreIndicators.muPerAddedValue

            this.renderMyChart1()
            this.renderMyChart2()
            this.renderMyChart3()
            this.renderMyChart4()
            this.renderMyChart5()
            this.renderMyChart6()
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    },
    // 浙江省地图

    renderMyChart1 () {
      var _this = this
      this.myChart1 = echarts.init(document.getElementById('annular1'))
      let uploadedDataURL = require('../zhejiang.json')
      echarts.registerMap('zhejiang', uploadedDataURL)

      this.option1 = {
        title: {
          text: '各地市化工产业亩均税收分布',
          top: '10px',
          textStyle: {
            fontSize: 14,
            width: '100%',
            color: '#1c4ca1'
          }
        },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          textStyle: {
            color: '#00E4FF'
          },
          formatter: function (para) {
            if (para.seriesType === 'map') {
              let str = `<div style="position: relative;border:1px solid #00d3e7;background-color:rgba(10, 39, 116, .5)">
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;top: -3px; "></div>
                <div style="width: 10px;height: 10px;position:absolute;border-top: 3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;top: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-right: 3px solid #00d3e7;right: -3px;bottom: -3px;"></div>
                <div style="width: 10px;height: 10px;position:absolute;border-bottom:3px solid #00d3e7;border-left: 3px solid #00d3e7;left: -3px;bottom: -3px;"></div>`
              if (
                para.data.matchParkList !== '' &&
                para.data.disMatchParkList !== ''
              ) {
                str +=
                  ' <div  style="padding: 10px;"><div style="color:#EEBF43;text-align: center;font-weight: 600"; >' +
                  para.name +
                  '</div>' +
                  '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;   display: inline-block; width: 80px;">&nbsp;化工行业营收</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.mainBusinessIncome +
                  ' (亿元)</span></div>' +
                  '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px; display: inline-block; width: 80px;">&nbsp;园区营收</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.parkIncome +
                  ' (亿元)</span></div>' +
                  '<div style=" font-size: 12px;"><span style="color:#E4E4E4;   font-size: 12px;display: inline-block; width: 80px;">&nbsp;亩均税收</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.perMuTax +
                  ' (万元)</span></div>' +
                  '<div  style=" font-size: 12px;"><span style="color:#E4E4E4;     font-size: 12px;display: inline-block; width: 80px;">&nbsp;亩均增加值</span>&nbsp;&nbsp;&nbsp;  <span  style=" padding-left: 5px;  color: #00E4FF !important;" >' +
                  para.data.perMuAddValue +
                  '(万元)</span></div></div></div>'
              }

              return str
            } else {
              return ''
            }
          }
        },
        visualMap: {
          type: 'continuous',
          orient: 'vertical',
          text: ['', '(万元)'],
          showLabel: true,
          seriesIndex: [0],
          min: this.option1MinData,
          max: this.option1MaxData,
          inRange: {
            color: ['#64E4FF', '#206ED4']
          },
          textStyle: {
            color: '#333333'
          },
          bottom: 10,
          right: 10
        },
        series: [
          {
            type: 'map',
            mapType: 'zhejiang', // 自定义扩展图表类型
            label: {
              show: true,
              color: '#fff'
            },
            map: 'zhejiang',
            // center: [104.114129, 37.550339],//当前视角的中心点
            zoom: 1, // 当前视角的缩放比例
            roam: true, // 是否开启平游或缩放
            scaleLimit: {
              // 滚轮缩放的极限控制
              min: 1,
              max: 2
            },
            emphasis: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            select: {
              itemStyle: {
                areaColor: '#005DDC'
              },
              label: {
                color: '#ffffff'
              }
            },
            data: this.option1Data
          }
        ]
      }
      this.myChart1.setOption(this.option1)
      this.autoPlay(_this.myChart1, _this.option1, 'startCharts1')
    },
    renderMyChart2 () {
      let _this = this
      this.myChart2 = echarts.init(document.getElementById('annular2'))
      this.option2 = {
        tooltip: {
          trigger: 'item'
        },

        grid: {
          left: '0%',
          right: '0%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },

        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 7,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        legend: {
          show: true,
          icon: 'circle',
          orient: 'horizontal',
          top: '90.5%',
          right: 'center',
          itemWidth: 6.5,
          itemHeight: 6,
          textStyle: {
            fontSize: 14
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.option2XData,
            axisLabel: {
              textStyle: {
                color: '#FFFFFF',
                fontSize: 10
              },
              interval: 0,
              margin: 20 // 刻度标签与轴线之间的距离。
            },
            axisLine: {
              show: false, // 不显示x轴
              lineStyle: {
                color: '#FFFFFF'
              }
            },
            axisTick: {
              show: false // 不显示刻度
            },

            boundaryGap: true,
            splitLine: {
              // show: true,
              width: 0.08,
              lineStyle: {
                type: 'solid',
                color: '#03202E'
              }
            }
          }
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2D5BAF',
                type: 'solid'
              }
            },
            type: 'value',
            name: '万元',
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2D5BAF'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#FFFFFF'
              }
            }
          }
        ],
        series: [
          {
            // 柱底圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [40, 14], // 调整截面形状
            symbolOffset: [0, 10],
            z: 6,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#00F4FF'
                  },
                  {
                    offset: 1,
                    color: '#0164A9'
                  }
                ])
              }
            },
            data: this.option2Data
          },

          // 柱体
          {
            name: '',
            type: 'bar',
            barGap: '0%',
            barWidth: 40, // 柱体宽度
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      // 第一节下面
                      offset: 0,
                      color: '#0164A9'
                    },
                    {
                      offset: 1,
                      color: '#0164A9'
                    }
                  ]
                }
              }
            },

            data: this.option2Data
          },

          // 柱顶圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [40, 14], // 调整截面形状[宽, 高]
            symbolOffset: [0, -10],
            z: 6,
            symbolPosition: 'end',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#00F4FF'
                    },
                    {
                      offset: 1,
                      color: '#0164A9'
                    }
                  ],
                  false
                )
              }
            },
            data: this.option2Data
          }
        ]
      }
      this.myChart2.setOption(this.option2)
      this.autoPlay(_this.myChart2, _this.option2, 'startCharts2')
      let num1 = 0
      let num2 = 7
      this.myChart2IntervalId = setInterval(() => {
        if (
          this.option2.dataZoom[0].startValue + 1 ===
          this.option2.series[0].data.length
        ) {
          num1 = 0
          num2 = 7
          this.option2.dataZoom[0].startValue = num1
          this.option2.dataZoom[0].endValue = num2
        } else {
          this.option2.dataZoom[0].startValue = num1 += 1
          this.option2.dataZoom[0].endValue = num2 += 1
        }
        this.myChart2.setOption(this.option2)
      }, 2000)
    },
    renderMyChart3 () {
      this.myChart3 = echarts.init(document.getElementById('annular3'))
      this.option3 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis'
        },
        color: ['#13B9FB'],
        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '0%',
          right: '0%',
          bottom: '2%',
          top: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0
            },
            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            data: this.option3XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '万元',
          splitLine: {
            lineStyle: {
              color: '#BFF7FF'
            }
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            // itemStyle: {
            //   color: "rgb(97, 133, 255)",
            // },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: 'rgba(2, 198, 255, 0' // 0% 处的颜色
                    },
                    // {
                    //   offset: 0.2,
                    //   color: 'rgba(2, 198, 255, 0' // 60% 处的颜色
                    // },
                    {
                      offset: 1,
                      color: '#02C6FF' // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },

            data: this.option3Data
          }
        ]
      }
      this.myChart3.setOption(this.option3)
    },
    renderMyChart4 () {
      var _this = this
      _this.myChart4 = echarts.init(document.getElementById('annular4'))
      let angle = this.angle4 // 角度，用来做简单的动画效果的
      let value = 80
      var timerId
      var outerRidus1 = 0.8
      var outerRidus2 = 0.85
      var data = []
      var data1 = []

      var seriesOption = [// 最外层圆
        {
          type: 'pie',
          radius: ['65%', '45%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          data: [],
          label: {
            show: false,
            position: 'outside',
            formatter: '{d}%',
            color: '#FFFFFF'
          },
          labelLine: {
            normal: {
              length: 80,
              lineStyle: {
                width: 1
              }
            }
          }
        },
        // 内圆 + 中间文字
        {
          type: 'pie',
          radius: ['50%', '30%'],
          center: ['50%', '50%'],
          // hoverAnimation: false,
          // z: 10,
          label: {
            show: false,
            position: 'center',
            formatter: () => {
              return '佣金总额\r\n{total|100} 个'
            },
            rich: {
              total: {
                fontSize: 24,
                color: '#FFFFFF'
              }
            },
            color: '#FFFFFF',
            fontSize: 16,
            lineHeight: 30
          },
          data: [],
          labelLine: {
            show: false
          }
        }
      ]
      for (let i = 0; i < _this.option4Data.length; i++) {
        data.push(
          {
            value: _this.option4Data[i].value,
            name: _this.option4Data[i].name,
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: _this.option4Data[i].itemStyle.color1 // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: _this.option4Data[i].itemStyle.color // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          }
        )
        data1.push({
          value: _this.option4Data[i].value,
          name: _this.option4Data[i].name,
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: _this.option4Data[i].itemStyle.color1 // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: _this.option4Data[i].itemStyle.color // 100% 处的颜色
                  }
                ]
              },
              opacity: 0.5
            }
          }
        }
        )
      }
      seriesOption[0].data = data
      seriesOption[1].data = data1

      this.option4 = {
        tooltip: {
          trigger: 'item',
          confine: true,
          padding: [0, 5],
          backgroundColor: 'rgba(0,0,0,.5)',
          extraCssText: 'width:150px;color:#ffffff; white-space:pre-wrap;z-index: 100',
          formatter: function (params) {
            let percent = 0
            let total = 0
            for (let i = 0; i < _this.option4Data.length; i++) {
              total += _this.option4Data[i].value
            }
            percent = Number(((params.value / total) * 100).toFixed(0))
            if (params.name !== '') {
              return params.name + '企业数 : ' + params.value + '个,占比 : ' + percent + '%'
            } else {
              return ''
            }
          }
        },
        series: seriesOption
      }

      // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
      function getCirlPoint (x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
        return {
          x: x1,
          y: y1
        }
      }
      this.myChart4.setOption(this.option4, true)
      this.autoPlay(_this.myChart4, _this.option4, 'timer4')
      // this.option4 = this.getPie3D(_this.option4Data, 0.8, '', 30, 250)
      // this.bindListen(_this.myChart4, _this.option4, '4', 'timer4')
      this.autoPlay(_this.myChart4, _this.option4, 'startCharts4')
    },
    renderMyChart5 () {
      var _this = this
      this.myChart5 = echarts.init(document.getElementById('annular5'))
      this.option5 = {
        tooltip: {
          show: true,
          trigger: 'item',
          confine: true,
          extraCssText: 'z-index: 100'
        },
        color: [
          '#00FFFF',
          '#0572EA',
          '#6BD59F',
          '#EAE87A',
          '#FFCD5E',
          '#AE42EA',
          '#FFCD5E',
          '#AE42EA'
        ],
        series: [
          {
            data: this.option5Data,

            type: 'pie',
            radius: [30, 100],
            center: ['40%', '50%'],
            roseType: 'area',
            label: {
              // 标识
              normal: {
                show: false,
                // position: 'center',
                formatter: '{d}%\n{b}'
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      }
      this.myChart5.setOption(this.option5)

      this.autoPlay(_this.myChart5, _this.option5, 'startCharts5')
    },
    renderMyChart6 () {
      var _this = this

      this.myChart6 = echarts.init(document.getElementById('annularmax'))
      this.option6 = {
        animationDuration: 5000,
        tooltip: {
          trigger: 'axis',
          enterable: true,
          confine: true
          // formatter: function (params) {
          //   console.log(params)
          // }

        },
        legend: {
          show: true,

          textStyle: {
            fontWeight: 'normal',
            color: '#ffffff' // legend颜色
          }

        },

        dataZoom: [
          {
            type: 'inside',
            startValue: 0,
            endValue: 5,
            xAxisIndex: [0],
            zoomLock: true
          }
        ],
        grid: {
          left: '0%',
          right: '0%',
          bottom: '2%',
          top: '25%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },

            // axisLabel: {

            //   formatter: function (params) {
            //     console.log(params)
            //   }
            // },
            axisLabel: {// 坐标轴刻度标签的相关设置。
              interval: 0,
              formatter: function (params) {
                var newParamsName = ''// 最终拼接成的字符串
                var paramsNameNumber = params.length// 实际标签的个数
                var provideNumber = 8// 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)// 换行的话，需要显示几行，向上取整
                /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ''// 表示每一次截取的字符串
                    var start = p * provideNumber// 开始截取的位置
                    var end = start + provideNumber// 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr// 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params
                }
                // 将最终的字符串返回
                return newParamsName
              }

            },

            axisLine: {
              // 这是y轴文字颜色
              lineStyle: {
                color: '#BFF7FF'
              }
            },
            data: this.option6XData
          }
        ],
        yAxis: {
          type: 'value',
          name: '万元',
          splitLine: {
            lineStyle: {
              color: '#BFF7FF'
            }
          },
          axisLine: {
            // 这是y轴文字颜色
            lineStyle: {
              color: '#BFF7FF'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: 15,
            name: '亩均税收',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(2, 198, 255, 1)' },
                { offset: 1, color: 'rgba(2, 198, 255, 0)' }
              ])
            },
            data: this.option6minData
          }, {
            type: 'bar',
            barWidth: 15,
            name: '亩均增加值',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(0,241,233, 1)' },
                { offset: 1, color: 'rgba(0,241,233, 0)' }
              ])
            },

            data: this.option6maxData
          }
        ]
      }
      this.myChart6.setOption(this.option6)
      this.autoPlay(_this.myChart6, _this.option6, 'startCharts6')
    },
    getPie3D (pieData, internalDiameterRatio, title, alpha, distance) {
      // internalDiameterRatio:透明的空心占比
      let that = this
      let series = []
      let sumValue = 0
      let startValue = 0
      let endValue = 0
      let legendData = []
      let legendBfb = []
      let k = 1 - internalDiameterRatio
      pieData.sort((a, b) => {
        return b.value - a.value
      })
      // 为每一个饼图数据，生成一个 series-surface 配置
      for (let i = 0; i < pieData.length; i++) {
        sumValue += pieData[i].value
        let seriesItem = {
          name:
            typeof pieData[i].name === 'undefined'
              ? `series${i}`
              : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k: k
          },
          center: ['10%', '50%']
        }

        if (typeof pieData[i].itemStyle !== 'undefined') {
          let itemStyle = {}
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined'
            ? (itemStyle.color = pieData[i].itemStyle.color)
            : null
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null
          seriesItem.itemStyle = itemStyle
        }
        series.push(seriesItem)
      }

      // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      legendData = []
      legendBfb = []
      for (let i = 0; i < series.length; i++) {
        endValue = startValue + series[i].pieData.value
        series[i].pieData.startRatio = startValue / sumValue
        series[i].pieData.endRatio = endValue / sumValue
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          series[i].pieData.value
        )
        startValue = endValue
        let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4)
        legendData.push({
          name: series[i].name,
          value: bfb
        })
        legendBfb.push({
          name: series[i].name,
          value: bfb
        })
      }
      let boxHeight = this.getHeight3D(series, 40) // 通过传参设定3d饼/环的高度，26代表26px
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        animationDuration: 5000,
        // legend: {
        //   data: legendData,
        //   orient: 'horizontal',
        //   type:'scroll',
        //   pageTextStyle: {
        //     color: "#A1E2FF"
        //   },
        //   pageIconColor: "#29bca8", // 可以点击的翻页按钮颜色
        //   pageIconInactiveColor: "#7f7f7f", // 禁用的按钮颜色
        //   left: 10,
        //   bottom: 10,
        //   itemGap: 10,
        //   textStyle: {
        //       color: '#A1E2FF',
        //   },
        //   show: true,
        //   itemHeight: 14,
        //   itemWidth: 14,
        // formatter: function(param) {
        //     let item = legendBfb.filter(item => item.name == param)[0];
        //     let bfs = that.fomatFloat(item.value * 100, 2) + "%";
        //     return `${item.name}  ${bfs}`;
        // }
        // },
        title: {
          text: title,
          top: 0,
          left: '10px',
          textStyle: {
            width: '100%',
            color: '#52CCFF',
            fontSize: 14,
            fontWeight: 600
          }
        },
        tooltip: {
          confine: true,
          padding: [0, 5],
          formatter: (params) => {
            if (
              params.seriesName !== 'mouseoutSeries' &&
              params.seriesName !== 'pie2d'
            ) {
              // let bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
              //   100).toFixed(2);
              return (
                `${params.seriesName}<br/>` +
                `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
                `${option.series[params.seriesIndex].pieData.value}个`
              )
            }
          }
        },
        xAxis3D: {
          min: -1,
          max: 1
        },
        yAxis3D: {
          min: -1,
          max: 1
        },
        zAxis3D: {
          min: -1,
          max: 2
        },
        grid3D: {
          show: false,
          boxHeight: boxHeight, // 圆环的高度
          viewControl: {
            // 3d效果可以放大、旋转等，请自己去查看官方配置
            alpha: alpha, // 角度
            distance: distance, // 调整视角到主体的距离，类似调整zoom
            rotateSensitivity: 0, // 设置为0无法旋转
            zoomSensitivity: 0, // 设置为0无法缩放
            panSensitivity: 0, // 设置为0无法平移
            autoRotate: false // 自动旋转
          }
        },
        series: series
      }
      return option
    },

    // 获取3d丙图的最高扇区的高度
    getHeight3D (series, height) {
      series.sort((a, b) => {
        return b.pieData.value - a.pieData.value
      })
      return (height * 25) / series[0].pieData.value
    },

    // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      // 计算
      let midRatio = (startRatio + endRatio) / 2
      let startRadian = startRatio * Math.PI * 2
      let endRadian = endRatio * Math.PI * 2
      let midRadian = midRatio * Math.PI * 2
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false
      }
      // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      k = typeof k !== 'undefined' ? k : 1 / 3
      // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
      let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
      // 计算高亮效果的放大比例（未高亮，则比例为 1）
      let hoverRate = isHovered ? 1.2 : 1
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32
        },
        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20
        },
        x: function (u, v) {
          if (u < startRadian) {
            return (
              offsetX +
              Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        y: function (u, v) {
          if (u < startRadian) {
            return (
              offsetY +
              Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          if (u > endRadian) {
            return (
              offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
            )
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
        },
        z: function (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u)
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1
          }
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1
        }
      }
    },

    fomatFloat (num, n) {
      var f = parseFloat(num)
      if (isNaN(f)) {
        return false
      }
      f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
      var s = f.toString()
      var rs = s.indexOf('.')
      // 判定如果是整数，增加小数点再补0
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + n) {
        s += '0'
      }
      return s
    },

    bindListen (myChart, option, num, timer) {
      // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。

      let that = this
      let flag = true
      // let selectedIndex = '';
      let hoveredIndex = ''
      let seriesIndex = 0
      // eslint-disable-next-line no-unused-vars
      let seriesName = ''
      // eslint-disable-next-line no-unused-vars
      let dataIndex = 0
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on('mouseover', function (params) {
        clearInterval(that[timer])
        flag = false
        seriesIndex = params.seriesIndex
        seriesName = params.seriesName
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = option.series[hoveredIndex].pieStatus.selected
            isHovered = false
            startRatio = option.series[hoveredIndex].pieData.startRatio
            endRatio = option.series[hoveredIndex].pieData.endRatio
            k = option.series[hoveredIndex].pieStatus.k
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            option.series[hoveredIndex].parametricEquation =
              that.getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                option.series[hoveredIndex].pieData.value
              )
            option.series[hoveredIndex].pieStatus.hovered = isHovered
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = ''
          }
          isSelected = option.series[seriesIndex].pieStatus.selected
          isHovered = true
          startRatio = option.series[seriesIndex].pieData.startRatio
          endRatio = option.series[seriesIndex].pieData.endRatio
          k = option.series[seriesIndex].pieStatus.k
          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[seriesIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[seriesIndex].pieData.value + 5
            )
          option.series[seriesIndex].pieStatus.hovered = isHovered
          that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
          that['legendValue' + num] =
            option.series[seriesIndex].name +
            ' : ' +
            (
              (option.series[seriesIndex].pieData.endRatio -
                option.series[seriesIndex].pieData.startRatio) *
              100
            ).toFixed(2) +
            '%'
          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = seriesIndex
          myChart.setOption(option)
        }
      })
      var chartHover = function () {
        // 准备重新渲染扇形所需的参数
        let isSelected
        let isHovered
        let startRatio
        let endRatio
        let k
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (seriesIndex === option.series.length) {
          seriesIndex = 0
        }
        if (hoveredIndex !== '') {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected
          isHovered = false
          startRatio = option.series[hoveredIndex].pieData.startRatio
          endRatio = option.series[hoveredIndex].pieData.endRatio
          k = option.series[hoveredIndex].pieStatus.k
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[hoveredIndex].pieData.value
            )
          option.series[hoveredIndex].pieStatus.hovered = isHovered
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = ''
        }
        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        isSelected = option.series[seriesIndex].pieStatus.selected
        isHovered = true
        startRatio = option.series[seriesIndex].pieData.startRatio
        endRatio = option.series[seriesIndex].pieData.endRatio
        k = option.series[seriesIndex].pieStatus.k
        // 对当前点击的扇形，执行高亮操作（对 option 更新）
        option.series[seriesIndex].parametricEquation =
          that.getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            option.series[seriesIndex].pieData.value + 5
          )
        option.series[seriesIndex].pieStatus.hovered = isHovered
        that['legendColor' + num] = option.series[seriesIndex].itemStyle.color
        that['legendValue' + num] =
          option.series[seriesIndex].name +
          ' : ' +
          (
            (option.series[seriesIndex].pieData.endRatio -
              option.series[seriesIndex].pieData.startRatio) *
            100
          ).toFixed(2) +
          '%'
        // 记录上次高亮的扇形对应的系列号 seriesIndex
        hoveredIndex = seriesIndex
        // 使用更新后的 option，渲染图表
        myChart.setOption(option)
        seriesIndex++
      }
      // 修正取消高亮失败的 bug
      myChart.on('globalout', function () {
        if (!flag) {
          that[timer] = setInterval(chartHover, 5000)
          flag = true
        }
      })
      that[timer] = setInterval(chartHover, 5000)
    },
    tableRowClassName ({ row, column, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'table-row1'
      } else {
        return 'table-row2'
      }
    },
    // 自动播放
    autoPlay (myChart, option, timer) {
      var that = this
      let flag = true
      let charPiecurrentIndex = 0
      // 鼠标移动上去的时候的高亮动画
      myChart.on('mouseover', function (param) {
        if (param.componentType === 'series') {
          flag = false
          clearInterval(that[timer])
          // 取消之前高亮图形
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex
          })

          charPiecurrentIndex = param.dataIndex
          //* *解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          // 高亮当前图形
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })

          myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: param.dataIndex
          })
        }
      })

      // 图标随窗口大小缩放
      window.addEventListener('resize', function () {
        myChart.resize()
      })

      // 自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen

        // 高亮当前图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
        // 显示 tooltip
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex
        })
      }

      that[timer] = setInterval(chartHover, 2000)
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on('mouseout', function (param) {
        if (!flag) {
          that[timer] = setInterval(chartHover, 2000)
          flag = true
        }
      })
    },
    typeChange (value) {
      this.selectType = value

      if (value === '01') {
        this.option3.series[0].data = this.option3TaxData
        this.myChart3.setOption(this.option3)
      } else {
        this.option3.series[0].data = this.option3AddData
        this.myChart3.setOption(this.option3)
      }
    },
    kindChange (value) {
      this.selectKind = value
      let _this = this
      this.$http
        .post(`/home/government/govBenefit/getBenefit`, {
          rate: value
        })
        .then(({ data: res }) => {
          if (res && res.code === 0) {
            this.option4Data = res.data.entRate.industryDistribution.map(
              (item, index) => {
                return {
                  name: item.name,
                  value: Number(item.entNum),
                  itemStyle: {
                    color: this.colorList1[index],
                    color1: this.colorList2[index]
                  }
                }
              }
            )

            clearInterval(_this.timer4)
            this.legendValue4 = ''
            this.legendColor4 = 'transparent'
            this.myChart4.dispose()
            this.renderMyChart4()
          } else {
            this.$message({ message: res.message, type: 'warning' })
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background: #041565;
  background-size: 100% 100%;
}
.box {
  background-image: url('../../../../assets/img/industry/框尺寸1.png');
  padding: 10px;
  margin-bottom: 10px;
  background-size: 100% 100%;
}
.box2 {
  background-image: url('../../../../assets/img/industry/bg2.png') !important;
  padding: 10px;
  margin-bottom: 10px;
  background-size: 100% 100%;
}
.title {
  width: 50%;
  color: #ffffff;
  font-weight: 700;
  margin-left: 10px;
  font-weight: bold;
  background-image: url('../../../../assets/img/industry/titlebg.png');
  background-size: 100% 100%;
  p {
    padding-left: 30px;
    font-size: 12px;
  }
}
.content {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 18px;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  background: transparent;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 47.5%;
    height: 161px;
    margin-left: 0.5%;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 20px;
  }
  .content-body-right {
    width: 47.5%;
    height: 161px;
    margin-left: 4%;
    background-size: 100% 100%;
  }
}
.index-body {
  width: 47.5%;
  background-image: url('../../../../assets/img/industry/car.png');
  background-size: 85%, 100%;
  background-repeat: no-repeat;
  height: 80px;
  margin: 5px;
  border-radius: 8px;
  padding: 10px 0px 10px 10px;
}

.index-content {
  width: 100%;
  height: 52px;
}

.title-content {
  display: block;
  font-size: 12px;
  color: #e5fbff;
  padding-left: 20px;
}
.content-value {
  color: rgb(0, 163, 255);
  font-size: 16px;
  font-weight: 600;
  width: 26%;
  text-align: right;
  float: left;
  color: #ffffff;
  margin-left: 30px;
  background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.compare-word {
  color: #ffffff;
  margin-left: 3px;
  margin-top: 10px;
  float: left;
  font-size: 10px;
}
.compare-body {
  color: #ffffff;
  margin-top: 5px;
  padding: 3px;
  font-size: 12px;
  border-radius: 4px;
  display: inline-block;
}
.img-mark {
  margin-top: 10px;
  margin-left: 78px;
}
.top-value {
  font-size: 28px;
  font-weight: 600;
  height: 55px;
  color: #ffffff;
  display: inline-block;
  margin-top: 20px;
}
.top-title {
  width: 100%;
  font-size: 14px;
  color: #e5fbff;
  float: left;
  margin-top: 5px;
}
.total-index-body {
  height: 100px;
  background-image: url('../../../../assets/img/industry/sjbg.png');
  box-sizing: border-box;
  background-size: 100% 100%;

  & > div {
    text-align: center;
    width: 100%;
    height: 33px;
    line-height: 33px;
  }
}
.total-index-title {
  width: 100%;
  font-size: 12px;
  font-weight: bold;
  color: #e5fbff;
}
.total-index-unit {
  color: #ffffff !important;
  width: 100%;
  font-size: 5px;
  float: right;
  // transform: scale(0.6);
  // -webkit-transform: scale(0.6);
  margin-right: 2px;
}
.total-index-value {
  font-weight: 600;
  float: left !important;
  span {
    font-size: 14px;
    width: 100%;
    color: #ffffff;
    background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    float: left;

  }
}
.enterprise-body {
  float: left;
  width: 55%;
  height: 200px;
  padding: 25px 5px;
}
.enterprise-content {
  width: 100%;
  height: 30px;
  padding: 0px 5px;

}
.enterprise-color {
  width: 10px;
  height: 10px;
  margin-top: 10px;
  float: left;
}
.enterprise-type {
  font-size: 13px;
  color: #ffffff;
  line-height: 30px;
  float: left;
  margin-left: 12px;
}
.enterprise-count {
  font-size: 18px;
  line-height: 30px;
  float: right;
  margin-right: 12px;
}
.enterprise-unit {
  font-size: 13px;
  color: #ffffff;
  line-height: 30px;
  float: right;
}
/deep/ .table-row1 {
  background-color: #082560 !important;
  border: none;
}

/deep/ .table-row2 {
  background-color: #051e79 !important;
  border: none;
}
.select-body {
  background: redd;
  position: absolute;
  right: 10px;
  top: 15px;
}
.select-body /deep/ .el-input__inner {
  color: #bbdaff !important;
  height: 30px;
  line-height: 25px;
  font-size: 13px;
}
.select-body /deep/ .el-input__icon {
  line-height: 20px;
}
/deep/ .gutter {
  background: transparent;
}
/deep/ .el-table__body-wrapper {
  background: transparent;
}
.select-body /deep/ .el-input__inner {
  background: #1f4987;
  border: 1px solid #3573fc;
}

/deep/ .el-select .el-input .el-select__caret {
  color: #3573fc;
}
.content-body /deep/.has-gutter {
  background: #022b7e !important;
  tr {
    background: #022b7e !important;
    border: none;
    th {
      background: #022b7e !important;
      color: #00e4ff;
      border: none;
    }
  }
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
  color: #bbdaff;
}
/deep/ .el-table__empty-block {
  background: transparent;
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent; //没有数据也变颜色
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.table1 {
  width: 100%;
}
.content-body.statistics-warning-row {
  background-color: #d6e6ff !important;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
/deep/ tbody {
  tr {
    .el-table_1_column_3 {
      .cell {
        color: #ffffff;
        background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.active {
  color: red;
}
.top-value-color {
  p {
    display: inline;
    color: #ffffff;
    background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  background-image: url('../../../../assets/img/industry/number.png');
  background-size: 100% 100%;
  display: inline-block;
  padding: 8px;
}
.top-value-color-right {
  p {
    display: inline;
    color: #ffffff;
    background-image: -webkit-linear-gradient(#fff, #f0c41b, #fff, #f0c41b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  display: inline-block;
  padding: 8px;
}
.compare_body {
  width: 100% !important;
  margin-top: 20px;
}
.el-top {
  margin: 0 5px;
  background-image: url('../../../../assets/img/industry/up@3x.png');
  background-size: 100% 100%;
  display: inline-block;
  width: 7px;
  height: 14px;
}
.el-bottom {
  margin: 0 5px;
  background-image: url('../../../../assets/img/industry/down@3x.png');
  background-size: 100% 100%;
  display: inline-block;
  width: 7px;
  height: 14px;
}
.bottom-left {
  width: 7px;
  height: 14px;
}

/*
mainBusinessIncome 化工行业营收 yi
parkIncome 园区营收 yi
perMuAddValue 亩均增加值
perMuTax 亩均税收
*/
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}
#tableColor /deep/ .el-table__body {
  width: 100% !important;
}

//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  display: none;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0);
  border-radius: 10px;
  background: #ededed;
}
/deep/ .el-table tbody tr:hover > td {
  background-color: #5f83ff !important;
}
.aperture {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-image: url('../../../../assets/img/industry/echartsBg2.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.box1 {
  background-image: url('../../../../assets/img/industry/bg3.png');
}
.legend {
  position: absolute;
  bottom: 10px;
  left: 5%;
  color: #a1e2ff;
  text-align: center;
  overflow: hidden;
  > div {
    float: left;
  }
}
.legendColor {
  width: 20px;
  height: 12px;
  line-height: 14px;
  border-radius: 3px;
  vertical-align: bottom;
}
.legend div:nth-child(2) {
  width: 170px;
  font-size: 12px;
  margin-left: 5px;
  text-align: left;

}
/*
 trigger: 'item',
 extraCssText: 'z-index: 9',
 backgroundColor: 'transparent',
 borderWidth: 0,
 padding: 0,
 textStyle: {
 color: '#00E4FF'
 },
 */
</style>
